<template>
    <div>
<!--        新增台账-->
        <el-dialog title="新增台账" :visible.sync="dialogFormVisible">
            <el-form :model="book">
                <el-row>
                    <el-col :span='12'>
                        <el-form-item label="运营状态" :label-width="120">
                        <el-input v-model="book.status" autocomplete="off"></el-input>
                    </el-form-item></el-col>
                    <el-col :span='12'>
                        <el-form-item label="产品型号" :label-width="120">
                            <el-input v-model="book.type" autocomplete="off"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span='12'>
                        <el-form-item label="产品编号" :label-width="120">
                            <el-input v-model="book.number" autocomplete="off"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span='12'>
                        <el-form-item label="出厂日期" :label-width="120">
                            <el-input v-model="book.chuTime" autocomplete="off"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span='12'>
                        <el-form-item label="启用时间" :label-width="120">
                            <el-input v-model="book.startTime" autocomplete="off"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span='12'>
                        <el-form-item label="密级" :label-width="120">
                            <el-input v-model="book.mi" autocomplete="off"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span='12'>
                        <el-form-item label="保修时间" :label-width="120">
                            <el-input v-model="book.bao" autocomplete="off"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span='12'>
                        <el-form-item label="备注" :label-width="120">
                            <el-input v-model="book.demo" autocomplete="off"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span='24'>
                        <el-form-item label="地址" :label-width="120">
                            <el-input v-model="book.address" autocomplete="off"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="addBook(book)">确 定</el-button>
            </div>
        </el-dialog>

<!--        编辑台账开始-->
        <el-dialog title="新增台账" :visible.sync="dialogFormVisible1">
            <el-form :model="editBook">
                <el-row>
                    <el-col :span='12'>
                        <el-form-item label="运营状态" :label-width="120">
                            <el-input v-model="editBook.status" autocomplete="off"></el-input>
                        </el-form-item></el-col>
                    <el-col :span='12'>
                        <el-form-item label="产品型号" :label-width="120">
                            <el-input v-model="editBook.type" autocomplete="off"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span='12'>
                        <el-form-item label="产品编号" :label-width="120">
                            <el-input v-model="editBook.number" autocomplete="off"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span='12'>
                        <el-form-item label="出厂日期" :label-width="120">
                            <el-input v-model="editBook.chuTime" autocomplete="off"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span='12'>
                        <el-form-item label="启用时间" :label-width="120">
                            <el-input v-model="editBook.startTime" autocomplete="off"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span='12'>
                        <el-form-item label="密级" :label-width="120">
                            <el-input v-model="editBook.mi" autocomplete="off"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span='12'>
                        <el-form-item label="保修时间" :label-width="120">
                            <el-input v-model="editBook.bao" autocomplete="off"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span='12'>
                        <el-form-item label="备注" :label-width="120">
                            <el-input v-model="editBook.demo" autocomplete="off"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span='24'>
                        <el-form-item label="地址" :label-width="120">
                            <el-input v-model="editBook.address" autocomplete="off"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible1 = false">取 消</el-button>
                <el-button type="primary" @click="addBook(editBook)">确 定</el-button>
            </div>
        </el-dialog>
<!--        编辑台账结束-->

<!--        新增台账-->
        <el-card>
            <!--    检索开始-->
            <el-row>
                <el-col :span='5'>运营状态： <el-input class='search' v-model="searchValue.status" placeholder="请输入内容"></el-input></el-col>
                <el-col :span='5'>产品型号： <el-input class='search' v-model="searchValue.type" placeholder="请输入内容"></el-input></el-col>
                <el-col :span='5'>产品编号： <el-input class='search' v-model="searchValue.number" placeholder="请输入内容"></el-input></el-col>
                <el-col :span='5'>地址： <el-input class='search' v-model="searchValue.address" placeholder="请输入内容"></el-input></el-col>
                <el-col :span = '4'> <el-button type="primary" v-on:click='search(searchValue)'>搜索</el-button></el-col>
            </el-row>
            <!--    检索结束-->

            <br><br><br><br><br>
            <!--    表格开始-->
            <el-row>
                <el-col :spap='24'>
                    <el-button type="primary" v-on:click='dialogFormVisible=true'>新增+</el-button>
                    <el-table
                        border
                        :data="tableData"
                        style="width: 100%"
                        max-height="500">
                        <el-table-column
                            fixed
                            prop="status"
                            label="运营状态"
                            width="150">
                        </el-table-column>
                        <el-table-column
                            prop="type"
                            label="产品型号"
                            width="120">
                        </el-table-column>
                        <el-table-column
                            prop="number"
                            label="产品编号"
                            width="120">
                        </el-table-column>
                        <el-table-column
                            prop="chuTime"
                            label="出厂时间"
                            width="120">
                        </el-table-column>
                        <el-table-column
                            prop="startTime"
                            label="启用时间"
                            width="120">
                        </el-table-column>
                        <el-table-column
                            prop="mi"
                            label="密级"
                            width="120">
                        </el-table-column>
                        <el-table-column
                            prop="bao"
                            label="保修时间（月）"
                            width="120">
                        </el-table-column>
                        <el-table-column
                            prop="address"
                            label="地址"
                            width="300">
                        </el-table-column>
                        <el-table-column
                            prop="demo"
                            label="备注"
                            width="120">
                        </el-table-column>
                        <el-table-column
                            fixed="right"
                            label="操作"
                            width="120">
                            <template slot-scope="scope">
                                <el-button
                                    @click.native.prevent="editStart(scope.$index, tableData)"
                                    type="text"
                                    size="small">
                                    编辑
                                </el-button>
                                <el-button
                                    @click.native.prevent="deleteBook(scope.$index, tableData)"
                                    type="text"
                                    size="small">
                                    移除
                                </el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </el-col>
            </el-row>
            <!--    表格结束-->
        </el-card>


    </div>
</template>

<script>
export default {
    created() {
        this.$http.get("/v1/book/list").then(res => {
            this.tableData = res
        })
    },
    data(){
        return{
            input:'',
            tableData: [],
            dialogFormVisible: false,
            dialogFormVisible1: false,
            editBook:{},
            book:{
                status:'',
                type:'',
                startTime:'',
                chuTime:'',
                bao:null,
                mi:'',
                demo:'',
                address:'',
                number:''
            },
            searchValue:{
                status:'',
                type:'',
                number:'',
                address:''
            }
        }
    },
    methods:{
        search(data){
            this.$http.post("/v1/book/search",data).then(res=>{
                this.tableData = res
            })
        },
        editStart(index, rows) {
           this.editBook = rows[index]
            this.dialogFormVisible1=true
        },
        addBook(data){
            this.$http.post("/v1/book/save",data).then(res=>{
                this.$notify({
                    title: '成功',
                    message: '已保存',
                    type: 'success'
                });
                this.book={}
                this.dialogFormVisible=false
                this.$http.get("/v1/book/list").then(res => {
                    this.tableData = res
                })
            })
        },
        deleteBook(index, rows){
            this.$http.get("/v1/book/delete?id="+rows[index].id * 1).then(res=>{
                this.$http.get("/v1/book/list").then(res => {
                    this.tableData = res
                })
                this.$notify({
                    title: '成功',
                    message: '删除成功',
                    type: 'success'
                });
            })
        }
    }
}
</script>

<style scoped>
.search{
    width: 50%;
}
</style>
